import { PenMainProps } from "@/types";
import { Pen } from "@meta2d/core";
import { useState } from "react";
import { PenStyle } from "@/components/Configuration/PenProps/components/PenStyle.tsx";
import { PenText } from "@/components/Configuration/PenProps/components/PenText.tsx";
interface Props extends PenMainProps {
  type: "styles" | "text";
}
export function MultiplePenStyle(props: Props) {
  const [penOptions, setPenOptions] = useState<Pen>(props.activePens[0] || {});
  const setPenValue = (key: keyof Pen, value: any) => {
    let newPenOptions = {
      ...penOptions,
      [key]: value,
    };
    setPenOptions(() => {
      return newPenOptions;
    });
    props.activePens.forEach((item) => {
      window.meta2d.setValue({
        id: item.id,
        [key]: value,
      });
    });
  };
  return (
    <>
      {props.type == "styles" && (
        <PenStyle penOptions={penOptions} setPenValue={setPenValue} />
      )}
      {props.type == "text" && (
        <PenText penOptions={penOptions} setPenValue={setPenValue} />
      )}
    </>
  );
}
